<template>
    <ul v-if="schedule.length">
    <li class="showLine" v-for="item in schedule" :key="item.scheduleId">
        <div class="left">
            <div class="line1">{{new Date(item.showAt*1000).getHours()}}:{{new Date(item.showAt*1000).getMinutes()}}</div>
            <div class="line2">{{new Date(item.endAt*1000).getHours()}}:{{new Date(item.endAt*1000).getMinutes()}}散场</div>
        </div>
        <div class="center">
                        <div class="line1">{{item.filmLanguage}}{{item.imagery}}</div>
            <div class="line2">{{item.hallName}}</div>

        </div>
        <div class="right">
            <span>￥{{item.salePrice/100}}</span>            
            <span><router-link :to="'/purchase'+$route.path">购票</router-link> </span>

        </div>

    </li>
    </ul>
</template>

<style lang="scss" scoped>

.showLine{
    height:1.48rem;
    padding:0.3rem;
    .left{
        width:2rem;
        height:0.86rem;
        float:left;
        .line1{
            font-size: 0.3rem;
        color: #191a1b;

        }
        .line2{
            font-size: 0.15rem;
    color: #797d82;
        }
    }
        .center{
        width:2.1rem;
        height:0.86rem;
        float:left;
    }
           
           .right{
        width:1.9918rem;
        height:0.92rem;
        float:right;
        box-sizing: border-box;
        padding:0.2rem 0;
        :nth-child(1){
            width:0.9rem;
            height:0.52rem;
            padding-right:0.4rem;
            box-sizing: border-box;
            color:#ff5f16;            
            line-height: 0.52rem;
            display: inline-block;
        }
        :nth-child(2){
            float: right;
            width:0.9rem;
            height:0.5rem;
            border:0.01rem solid #ff5f16;
            line-height: 0.5rem;
            text-align: center;
            a{
            line-height: 0.5rem;
            width:0.9rem;
            height:0.5rem;
            float:left;
            color:#ff5f16;
            text-align: center;
            font-size: 0.2rem;
            padding-right:0rem;
            }

        }
    }


}

</style>

<script>
import {getplayDetail} from "@/api/cinema.js"

export default {
    data(){
        return{
            schedule:[]

        }
    },
    methods:{
                
        getPlayDtl(){
            console.log({filmId:this.$route.params.mid,cinemaId:this.$route.params.id,data:this.$route.params.date})
            getplayDetail({filmId:this.$route.params.mid,cinemaId:this.$route.params.id,data:this.$route.params.date}).then(res=>{
                this.schedule=res.data.schedules
                console.log(res)
            })
        }

    },
    watch:{
                $route:{
            handler(val){
            this.getPlayDtl()
            },
            immediate:true
        }

    }

}
</script>